<template>
  <div>
    <section class="todoapp">
      <todoHeader @addTack="addTackHandler"></todoHeader>
      <todoMain :list="showList" @dalTack="dalTackHandler"></todoMain>
      <todoFooter @delTack="delTackHandler" :list="showList" @changeTack="changeTackHandler"></todoFooter>
    </section>
  </div>
</template>
<script>
import todoHeader from "./components/TodoHeader";
import todoMain from "./components/TodoMain";
import todoFooter from "./components/TodoFooter";

export default {
  name: "App",
  components: {
    todoHeader,
    todoMain,
    todoFooter,
  },
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list')),
      flagTag:`all`
    };
  },
  methods: {
    addTackHandler(text) {
      let id =this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100;
      this.list.push({ id, name: text, isDone: false });
    },
    dalTackHandler(id) {
      this.list = this.list.filter((ele) => ele.id != id);
    },
    changeTackHandler(flagTag) {
      this.flagTag=flagTag
    },
    delTackHandler(){
      this.list = this.list.filter((ele)=>!ele.isDone)
    }
  },
    computed: {
      showList() {
        if (this.flagTag == "yes") {
          return this.list.filter((ele) => !ele.isDone);
        } else if (this.flagTag == "no") {
          return this.list.filter((ele) => ele.isDone);
        }return this.list
      },
    },
    watch:{
      list:{
          deeper: true,
          handler(){
            localStorage.setItem('list',JSON.stringify(this.list))
          }
      }
    }
};
</script>